<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>请求拦截器</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
    <button id="btn">请求</button>
    <script>
        //创建axios实例
        //设置公共配置
        // const myAxios = axios.create({
        //     baseURL:'/axios',//公共路径
        //     timeout:10000,//超时事件
        //     headers:{}//请求头部
        // })
        // //请求拦截器
        // myAxios.interceptors.request.use((config)=>{
        //     // config是我们自己的配置信息
        //     //在请求头中添加token
        //     config.headers.token="dadasd.dasdasd.sadasdasd"
        //     //需要对请求做的事情
        //     return config
        // })  
        // myAxios.interceptors.response.use(
        //     (response)=>{
        //     // console.log(response);响应回来的数据
        //     return  response.data
        //     },
        //     (err)=>{
        //         //axios默认返回成功的promise方便我们操作,拦截器返回值就是axios的返回值
        //         // 如果请求响应成功,axios默认成功,拦截器的返回值是不是promise都没有影响
        //         //一旦请求响应失败,拦截器只返回值,那么axios也返回同样的值,axios默认成功,这样整个axios的返回值在失败情况下也返回成功的promise,值是拦截器的返回值,所以需要我们手动在报错或者失败时,返回失败的promise
        //         return Promise.reject(err)
        //     })
        // btn.onclick =async function(){
        //   try {
        //     const result = await  myAxios.get('/get1',{
        //         params:{
        //             userId:"001"
        //         }
        //     })
        //   } catch (error) {
        //       alert()
        //   }

        // }

        const myAxios = axios.create({
            baseURL: "/axios",
            headers: {},
            timeout: 10000
        })
        myAxios.interceptors.request.use((config) => {
            config.headers.token = "123123.31231.213"
            // throw Error('请求错误')
            return config
        })
        myAxios.interceptors.response.use((response) => {
            return response.data
        }, (err) => {
            return Promise.reject(err)
        })
        btn.onclick =async function () {
          
            return await myAxios.get('/get', {
                params: {
                    userId: "001"
                }
            }).then((resolve)=>{
                console.log(resolve);
            }).catch((err)=>{
                console.log(err);
            })
        }
    </script>
</body>

</html>